<template>
  <div id="index-header">
    <div class="app-container clearfix head-content" v-if="isScroll">
      <div class="fl banner-img" @click="backIndex"></div>
      <div class="fl banner-imgs"></div>
      <div class="fr">
        <div class="search fl">
          <div>
            <form @submit.prevent="doSearch(key)">
              <header-select v-model="search" :options="searchTitles"></header-select>
              <input type="text" v-model="key" class="search-inp"><button type="submit" class="search-btn">搜索</button>
            </form>
          </div>
          <div class="hot-search">
            <span>热搜：</span>
            <span class="hot-text" v-for="(hot,index) in hotList" :key="index" v-text="hot" @click="doSearch(hot, 1)"></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 滚动到达一定高度时,该组件的样式 -->
    <div class="app-container clearfix scroll-seach" v-else :style="{left: `${scrollLeft}px`}">
      <div class="app-container">
        <div class="fl newbanner-img" @click="backIndex"></div>
        <div class="fl banner-imgs"></div>
        <div class="search-box">
          <div class="search">
            <div>
              <form @submit.prevent="doSearch(key)">
                <header-select v-model="search" :options="searchTitles"></header-select>
                <input type="text" v-model="key" class="search-inp"><button type="submit" class="search-btn searchBtn" style="float: left;">搜索</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiHotSearch } from '../../common/api'
import { windowScroll } from '../../common/util'
import headerSelect from './headerSelect.vue'

export default {
  data() {
    return {
      searchTitles: [
        {label: '宝贝', value: 1},
        {label: '店铺', value: 2},
        {label: '品牌', value: 3}
      ],
      hotList: [''],
      key: '' || this.$route.query.key || this.$route.query.name,
      search: this.$route.query.st || 1,
      param: {
        keyWord: '' || this.$route.query.key || this.$route.query.name,
        currentPage: 1,
        searchType: 'goods',
        goodsPro: '',
        showCount: 10,
        gcIdThird: ''
      },
      isScroll: true, // 判断是否滚动
      scrollLeft: 0
    }
  },
  components: {
    headerSelect
  },
  created() {
    // 如果页面刷新了，则保留搜索的结果（在搜索页面）
    // if (this.$route.path.indexOf('/search/goods') >= 0 || this.$route.path.indexOf('/search/stores') >= 0) {
    //   // 如果在搜索页面
    //   // this.key = session.get('keyword')

    //   // 如果是搜索页面，则展示之前搜索的类型
    //   // this.search = (session.get('search-index') || 1)
    // }

    // 查询热搜的内容
    apiHotSearch().then(data => {
      this.hotList = data.sysconfig.hotSearchs
    })
  },
  mounted() {
    if (this.$route.path == '/') {
      // 初始化滚动时间
      windowScroll.init()
      // 当滚动超出网页的可见区域50%，则更改搜索样式
      windowScroll.setCallBack(() => {
        const sl = -Math.max(document.body.scrollLeft, document.documentElement.scrollLeft)
        this.scrollLeft = sl
        if ($(window).scrollTop() > screen.availHeight * 0.45) {
          this.isScroll = false
        } else {
          this.isScroll = true
        }
      })
    }
  },
  methods: {
    doSearch(key, id) {
      this.key = key
      if (id) {
        this.search = 1
      }
      switch (this.search) {
        // 当前是商品搜索
        case 1:
          // 商品搜索
          this.param.searchType = 'goods'
          // 设置关键词
          this.param.keyWord = key
          // // 清空品牌字段
          // this.param.brandName = ''
          // // 店铺搜索每页展示20条数据
          // this.param.showCount = 20
          // 跳转到搜索界面
          if (this.param.keyWord == undefined) {
            this.param.keyWord = ''
          }
          this.$router.push(`/search/goods?type=goods&st=1&key=${this.param.keyWord}&ob=colligate`)
          break
        // 店铺搜索
        case 2:
          // 店铺搜索
          this.param.searchType = 'store'
          // 清空排序
          // this.param.orderType = ''
          // // 清空排序条件
          // this.param.orderBy = ''
          // // 清空关键词
          this.param.keyWord = key
          // // 清空品牌字段
          // this.param.brandName = ''
          // // 店铺搜索每页展示10条数据
          // this.param.showCount = 10
          // 跳转到店铺搜索页面
          if (this.param.keyWord == undefined) {
            this.param.keyWord = ''
          }
          this.$router.push(`/search/stores?type=stores&st=2&key=${this.param.keyWord}&ob=colligate`)
          break
        // 当前是品牌搜索
        case 3:
          // 品牌搜索
          this.param.searchType = 'goods'
          // 清空关键词
          // this.param.keyWord = ''
          // // 品牌名称
          this.param.brandName = key
          // // 店铺搜索每页展示20条数据
          // this.param.showCount = 20
          // 跳转到搜索页面
          if (this.param.brandName == undefined) {
            this.param.brandName = ''
          }
          this.$router.push(`/search/goods?type=goods&st=3&name=${this.param.brandName}&ob=colligate`)
          break
      }
      // 如果当前是商品搜索页面
      // if (this.$route.path.indexOf('/search/goods') >= 0) {
      //   // 执行查询
      //   this.$store.dispatch('fetchSerachGoods')
      // }

      // // 如果当前是店铺搜索页面
      // if (this.$route.path.indexOf('/search/stores') >= 0) {
      //   // 执行查询
      //   this.$store.dispatch('fetchSerachGoods')
      // }
    },
    // 返回首页
    backIndex() {
      if (this.$route.path.indexOf('/index/') == 0) {
        this.$emit('on-index')
      }
      this.$router.replace('/')
    }
  }
}
</script>

<style lang="scss">
.scroll-seach {
  .select-wrap {
    background-color: #ffffff!important;
    padding: 3px;
    margin-right: -5px;
    border-right: 1px solid #ccc;
    float: left;
    .form-control {
      color: #000!important;
    }
    .ico-drop {
      background-image: url('../../assets/new_down.png') !important;
      top: 12px!important;
    }
    .select-drop {
      left: 0px; 
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@media screen and (max-width: 1230px) {
  #index-header {
    .scroll-seach {
      .app-container {
        width: 100%;
        min-width: auto;
        .search-inp {
          width: 50%
        }
      }
    }
    .scroll-seach {
      form {
        width: 60%
      }
    } 
  }
}
#index-header {
  width: 100%;
  background-color: $color-white;
  .head-content {
    height: 108px;
    padding-left: 20px;
    background-color: #fff;
    .banner-img {
      width: 120px;
      height: 50px;
      background: url('../../assets/logo.png') no-repeat;
      background-size: 100%;
      margin-top: 30px;
      cursor: pointer
    }
    .banner-imgs {
      width: 165px;
      height: 40px;
      background: url('../../assets/hall.png') no-repeat;
      background-size: 100%;
      margin-top: 30px;
      cursor: pointer;
      margin-left: 20px;
    }
    .search {
      margin-top: 26px;
      .search-term {
        padding-top: 5px;
        span {
          padding: 3px 14px;
          font-size: 16px;
          color: $color-main;
          cursor: pointer;
          &.selected {
            background-color: $color-main;
            color: $color-white;
          }
        }
      }
      form {
        border: 2px solid $color-main; 
        width: 558px;
      }
      
      .hot-search {
        padding:6px 0px;
        font-size: 12px;
        color: $color-gray;
        cursor: pointer;
        .hot-text {
          padding: 0 4px;
          font-size: 12px;
          color: $color-gray;
          cursor: pointer;
          &:hover {
            color: $color-main
          }
        }
      }
    }
  }
  .search-inp {
    width: 360px;
    height: 34px;
    border-left: 1px solid $color-main;
    border-right: 0px;
    padding: 2px 0px 2px 6px;
  }
  .search-btn {
    width: 120px;
    height: 34px;
    background-color: $color-main;
    color: $color-white;
    font-size: 16px;
    float: right;
  }
  // 滚动时样式
  .scroll-seach {
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: $color-main;
    width: 100%;
    padding: 6px;
    .newbanner-img {
      width: 83px;
      height: 34px;
      background: url('../../assets/new_logo.png') no-repeat;
      background-size: 100%;
      cursor: pointer
    }
    .search-inp {
      width: 548px;
      float: left;
    }
    .searchBtn {
      width: auto;
      margin-left: 50px;
    }
    form {
      width: 706px;
      text-align: center;
      margin: 0 auto;
    }
    .search-box {
      position: relative;
      text-align: center;
    }
  } 
}
</style>